<template>
  <view class="ver-layout">
    <image class="top-bg" src="../../static/ic_login_top_bg.png"></image>
    <view class="login-box ver-layout">
      <view class="login-title">{{ loginTitle }}</view>
      <!--  手机号输入   -->
      <view class="login-item hor-layout-center" style="margin-top: 89rpx">
        <image class="login-icon" src="@/static/ic_login_account.png"></image>
        <input v-model="loginParams.phone" type="number" maxlength="11" class="input-phone"
               placeholder-class="input-placeholder" placeholder="请输入手机号"/>
      </view>
      <!--  验证码输入    -->
      <view class="login-item hor-layout-center" v-if="loginType===0" style="margin-top: 50rpx;padding-bottom: 18rpx">
        <image class="login-icon" src="@/static/ic_login_yzm.png"></image>
        <input v-model="loginParams.code" type="number" maxlength="6" class="input-phone"
               placeholder-class="input-placeholder" placeholder="请输入验证码"/>
        <view class="get-yzm-btn" :class="{ 'disabled': !canGetYzmUse }" @click="getYzmCode">{{ getYzmText }}</view>
      </view>
      <!--  密码输入    -->
      <view class="login-item hor-layout-center" v-if="loginType===1" style="margin-top: 67rpx">
        <image class="login-icon" src="@/static/ic_login_lock.png"></image>
        <input v-model="loginParams.passwd" type="number" maxlength="6" class="input-phone"
               placeholder-class="input-placeholder" placeholder="请输入密码"/>
      </view>
      <view class="change-login-type hor-layout-side">
        <view @click="changeLoginType">{{ loginText }}</view>
        <view style="color: #999999" @click="findPassword">忘记密码</view>
      </view>
      <!--  登录    -->
      <view class="login-btn" :class="{ 'disabled': !canLoginUse }" @click="loginClick">
        登&nbsp&nbsp&nbsp&nbsp录
      </view>
      <view class="login-hint">点击登录代表您已同意
        <span class="hint-link" @click="navToAgreement"> 用户协议 </span>和
        <span class="hint-link"> 隐私政策 </span>
      </view>
    </view>
  </view>
</template>

<script>
import {agreement, findPassword, home} from "@/router.js"
import {check_mobile} from "@/common/common.js"
import {LoginApi} from "@/api/login.js"

let engine = new LoginApi()
export default {
  name: "loginByPhone",
  data() {
    return {
      countDownTimer: '',//倒计时
      getYzmText: '获取验证码',
      loginType: 0,//0:验证码登录，1：手机号登录
      loginParams: {
        passwd: '',
        phone: '',
        code: '',
      }
    }
  },
  computed: {
    loginTitle() {
      return this.loginType === 0 ? "验证码登录" : "手机号登录"
    },
    loginText() {
      return this.loginType === 0 ? "手机号登录" : "验证码登录"
    },
    isPhoneRight() {
      return check_mobile(this.loginParams.phone)
    },
    canGetYzmUse() {
      return this.isPhoneRight && this.getYzmText === '获取验证码'
    },
    canLoginUse() {
      let yzmUse = this.loginType === 0 && this.isPhoneRight && this.loginParams.code,
          phoneUse = this.loginType === 1 && this.isPhoneRight && this.loginParams.passwd
      if (yzmUse || phoneUse) return true
      else return false
    }
  },
  onLoad() {
    //用户信息存在直接跳转首页
    const token = this.$store.state.user.token
    if (token) this.$u.route({type: 'switchTab', url: home})
    console.log("onLoad", token)
  },
  onUnload() {
    console.log("onUnload")
    if (this.countDownTimer)
      clearInterval(this.countDownTimer), this.countDownTimer = null
  },
  methods: {
    changeLoginType() {
      this.loginType = this.loginType === 0 ? 1 : 0
    },
    findPassword() {
      this.$u.route({url: findPassword})
    },
    navToAgreement() {
      this.$u.route({url: agreement})
    },
    startTimer() {
      let num = 30
      this.countDownTimer = setInterval(() => {
        console.log(num)
        if (num === 0) {
          clearInterval(this.countDownTimer)
          this.countDownTimer = num
          this.getYzmText = "获取验证码"
        } else this.getYzmText = `${num}秒后可再发`
        num--
      }, 1000)
    },
    getYzmCode() {
      if (this.getYzmText !== '获取验证码') return;
      if (!this.isPhoneRight) {
        this.$u.toast("手机号错误！")
        return
      }
      let {phone} = this.loginParams
      engine.sendPhoneCode(phone).then(res => {
        this.$u.toast(res.message);
        this.startTimer()
      }).catch(err => {
        this.$u.toast(err.message);
      })
    },
    loginClick() {
      if (!this.isPhoneRight) {
        this.$u.toast("手机号错误！")
        return
      }
      if (this.loginType === 0 && !this.loginParams.code) {
        this.$u.toast("请输入验证码！")
        return
      }
      if (this.loginType === 1 && !this.loginParams.passwd) {
        this.$u.toast("请输入密码！")
        return
      }
      let {phone, code, passwd} = this.loginParams
      if (this.loginType === 0) {//验证码登录
        engine.loginByCode({phone, code}).then(res => {
          this.$u.toast(res.message);
          if (res.code === 500) return
          this.loginSuccess(res.data)
        }).catch(err => {
          console.log(err)
          this.$u.toast(err.message);
        })
      } else if (this.loginType === 1) {//手机号登录
        engine.loginByPhone({phone, passwd}).then(res => {
          this.$u.toast(res.message);
          if (res.code === 500) return
          this.loginSuccess(res.data)
        }).catch(err => {
          console.log(err)
          this.$u.toast(err.message);
        })
      }
    },
    loginSuccess(data) {
      let {token, user} = data
      this.$store.commit('user/set_token', {token, userInfo: user})
      this.$u.route({type: 'switchTab', url: home})
    }
  }
}
</script>

<style scoped lang="scss">
.top-bg {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 640rpx;
}

.login-box {
  position: relative;
  margin: auto;
  margin-top: 380rpx;
  width: 688rpx;
  background: #FFFFFF;
  box-shadow: 0px 3px 62px 0px rgba(190, 189, 189, 0.33);
  border-radius: 29rpx;

  .login-title {
    width: 100%;
    text-align: center;
    margin-top: 80rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
  }

  .login-item {
    margin: 0px 60rpx;
    padding-bottom: 34rpx;
    border-bottom: 1px solid #E7E7E7;

    .login-icon {
      width: 30rpx;
      height: 30rpx;
    }

    .input-phone {
      flex: 1;
      margin-left: 20rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
    }

    /deep/ .input-placeholder {
      color: #9FA7AD;
    }

    .get-yzm-btn {
      padding: 16rpx 14rpx;
      font-size: 24rpx;
      color: #42B4AB;
      border: 1px solid #42B4AB;
      border-radius: 6rpx;
      margin-left: 10px;
    }

    .get-yzm-btn.disabled {
      color: lightgray;
      border: 1px solid lightgray;
    }
  }

  .change-login-type {
    margin-left: 60rpx;
    margin-right: 60rpx;
    margin-top: 27rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #42B4AB;
  }

  .login-btn {
    height: 80rpx;
    line-height: 80rpx;
    margin: 0px 60rpx;
    margin-top: 76rpx;
    text-align: center;
    font-size: 30rpx;
    color: #FFFFFF;
    background: #42B4AB;
    border-radius: 37rpx;
  }

  .login-btn.disabled {
    background: lightblue;
  }

  .login-hint {
    width: 100%;
    margin-top: 43rpx;
    text-align: center;
    font-size: 24rpx;
    color: #9FA7AD;
    margin-bottom: 102rpx;
  }

  .hint-link {
    color: #42B4AB;
  }
}
</style>
